<template>
    <div class="container">
        <div class="wall">
            <div>
                <el-button type="text" style="color: #f4ffb8">整齐视图</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" style="color: #f4ffb8">我的便笺</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" style="color: #f4ffb8">新建便笺</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button type="text" style="color: #f4ffb8">内容检索</el-button>
            </div>
            <div class="note" v-for="(item,index) in testData" :key="index" @mousedown="mousedown">
                <div class="note-content"
                     v-if="!item.isEdit"
                     v-html="item.content"
                     :ref="'note' + index">
                </div>
                <el-input
                        v-else
                        class="note-content my-textarea"
                        type="textarea"
                        placeholder="请输入内容"
                        :autosize="{ minRows: 10 }"
                        v-model="item.content"
                        :ref="'note' + index"
                        @blur="handleChange"
                ></el-input>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Test",
        data(){
          return{
              /*测试用数据*/
              testData:[
                  {
                      x:200,/*横向位置*/
                      y:200,/*竖向位置*/
                      title:'note1',/*标题*/
                      content:'text1',/*内容*/
                      bg:'#ff928e',/*背景颜色*/
                      isEdit:false,
                  },
                  {
                      x:200,/*横向位置*/
                      y:600,/*竖向位置*/
                      title:'note2',/*标题*/
                      content:'text2',/*内容*/
                      bg:'#c9a3ff',/*背景颜色*/
                      isEdit: false,
                  },
              ]
          }
        },
        methods:{
            mousedown: function(event) {
                let _this = this;
                if (!this.isEdit) {
                    this.startX = event.x;
                    this.startY = event.y;
                    this.note.moving = true;
                    document.onmousemove = event => {
                        if (!_this.note.moving) return false;

                        let dx = event.x - _this.startX;
                        let dy = event.y - _this.startY;

                        if (
                            _this.note.x + dx <= 0 ||
                            _this.note.x + dx >= _this.width - 250 ||
                            _this.note.y + dy <= 60
                        ) {
                            return false;
                        }

                        _this.note.x1 = _this.note.x + dx;
                        _this.note.y1 = _this.note.y + dy;
                    };
                    document.onmouseup = () => {
                        if (!this.isEdit) {
                            this.note.moving = false;
                            this.note.x = this.note.x1;
                            this.note.y = this.note.y1;
                            this.saveNote();
                            document.onmousemove = null;
                            document.onmouseup = null;
                        }
                    };
                }
            },
            handleChange(){

            }
        },
        mounted() {
            console.log(this.$refs.note.style.cssText);
        },
    }
</script>

<style scoped>
    .wall{
        justify-content: center;
        width: 100%;
        height: 2000px;
        background-color: #5B8C00;
        background-image: url('~@/assets/45-degree-fabric-dark.png');
    }
    .note{
        --y:600px;
        --x:600px;
        position: absolute;
        top: 600px;
        left: 440px;
        width: 220px;
        height: 270px;
        border-radius: 15px;
        padding: 15px;
        text-align: left;
        background-color: #ff928e;
        background-image: url('~@/assets/60-lines.png');
    }
    .note:hover{
        box-shadow:2px 2px 10px #606060;
    }
</style>
